<template>
  <div class="echartsMapAllDemo">
    <!-- style的宽高一定要写，不写也不会展示echarts图 -->
    <div id="myEcharts" ref="myEcharts" style="width:80vw;height:80vh;border:2px solid red"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import chinaJson from "@/assets/china.json"
import {countByNameLike} from "@/api/hospital";

export default {
  name: "DataAnalysis",
  data() {
    return {};
  },
  mounted() {
    this.chinaEcharts();
    this.countAddress("湖南")
  },
  methods: {
    async chinaEcharts() {
      echarts.registerMap("china", chinaJson);
      let myChart = echarts.init(this.$refs.myEcharts);

      var data = [
        {name: "北京", value: await this.countAddress("北京")},
        {name: "天津", value: await this.countAddress("天津")},
        {name: "河北", value: await this.countAddress("河北")},
        {name: "山西", value: await this.countAddress("山西")},
        {name: "内蒙古", value: await this.countAddress("内蒙古")},
        {name: "辽宁", value: await this.countAddress("辽宁")},
        {name: "吉林", value: await this.countAddress("吉林")},
        {name: "黑龙江", value: await this.countAddress("黑龙江")},
        {name: "上海", value: await this.countAddress("上海")},
        {name: "江苏", value: await this.countAddress("江苏")},
        {name: "浙江", value: await this.countAddress("浙江")},
        {name: "安徽", value: await this.countAddress("安徽")},
        {name: "福建", value: await this.countAddress("福建")},
        {name: "江西", value: await this.countAddress("江西")},
        {name: "山东", value: await this.countAddress("山东")},
        {name: "河南", value: await this.countAddress("河南")},
        {name: "湖北", value: await this.countAddress("湖北")},
        {name: "湖南", value: await this.countAddress("湖南")},
        {name: "重庆", value: await this.countAddress("重庆")},
        {name: "四川", value: await this.countAddress("四川")},
        {name: "贵州", value: await this.countAddress("贵州")},
        {name: "云南", value: await this.countAddress("云南")},
        {name: "西藏", value: await this.countAddress("西藏")},
        {name: "陕西", value: await this.countAddress("陕西")},
        {name: "甘肃", value: await this.countAddress("甘肃")},
        {name: "青海", value: await this.countAddress("青海")},
        {name: "宁夏", value: await this.countAddress("宁夏")},
        {name: "新疆", value: await this.countAddress("新疆")},
        {name: "广东", value: await this.countAddress("广东")},
        {name: "广西", value: await this.countAddress("广西")},
        {name: "海南", value: await this.countAddress("海南")}
      ];
      var geoCoordMap = {
        上海: [121.472644, 31.231706],
        云南: [102.712251, 25.040609],
        内蒙古: [111.670801, 40.818311],
        北京: [116.405285, 39.904989],
        台湾: [121.509062, 25.044332],
        吉林: [125.3245, 43.886841],
        四川: [104.065735, 30.659462],
        天津: [117.190182, 39.125596],
        宁夏: [106.278179, 38.46637],
        安徽: [117.283042, 31.86119],
        山东: [117.000923, 36.675807],
        山西: [112.549248, 37.857014],
        广东: [113.280637, 23.125178],
        广西: [108.320004, 22.82402],
        新疆: [87.617733, 43.792818],
        江苏: [118.767413, 32.041544],
        江西: [115.892151, 28.676493],
        河北: [114.502461, 38.045474],
        河南: [113.665412, 34.757975],
        浙江: [120.153576, 30.287459],
        海南: [110.33119, 20.031971],
        湖北: [114.298572, 30.584355],
        湖南: [112.982279, 28.19409],
        澳门: [113.54909, 22.198951],
        甘肃: [103.823557, 36.058039],
        福建: [119.306239, 26.075302],
        西藏: [91.132212, 29.660361],
        贵州: [106.713478, 26.578343],
        辽宁: [123.429096, 41.796767],
        重庆: [106.504962, 29.533155],
        陕西: [108.948024, 34.263161],
        青海: [101.778916, 36.623178],
        香港: [114.173355, 22.320048],
        黑龙江: [126.642464, 45.756967]
      };
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
              // value: geoCoord.concat(data[i].value)
            });
          }
          console.log(geoCoord.concat(data[i].value))
        }
        // console.log(res)
        return res;
      };

      let option = {
        backgroundColor: "transparent",
        title: {
          text: "全国各省份医院分布数",
          subtext: "data from count",
          left: "center",
          textStyle: {
            color: "#231c1c"
          }
        },
        tooltip: {
          trigger: "item"
        },
        //这个属性配置一定要有，要不然无法实现光圈效果
        geo: {
          show: true,
          map: "china",
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#09ee09",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        //series就是地图上的数据（去掉就没有数据了）
        series: [
          //所有的市
          {
            name: "医院数",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function (val) {
              console.log(val[2])
              return val[2];
            },
            //这几个样式一定要加，加上才有那种光圈的效果
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,

            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            //圆点的样式
            itemStyle: {
              color: "#ddb926"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    async countAddress(name) {
      const res = await countByNameLike({name: name});
      if (res.flag == true) {
        console.log(res.data);
        return res.data;
      } else {
        this.$message.error(res.data);
      }
    }
  },
}
</script>

<style scoped>

</style>